<template>
  <view class="hx-store" @touchstart="touchStart">
    <ikz-loading :css-data="loading_css"></ikz-loading>
    <!-- 只需要绑定购物车位置即可 -->
    <flyInCart ref="inCart" :cartBasketRect="cartBasketRect"></flyInCart>
    <!-- 头部 -->
    <view class="header">
      <view class="left">
        <image
          :src="
            storeData.logo_image
              ? adminImgPath + storeData.logo_image
              : '/static/tou.png'
          "
          mode="aspectFill"
        ></image>
      </view>
      <view class="right">
        <div style="display: flex; align-items: center; width: 100%">
          <view class="tit">{{ storeData.name }}</view>
          <view class="reserve-tag"> 可预约 </view>
        </div>
        <view class="row"
          >营业时间：{{ storeData.business_hours_start_times }}~{{
            storeData.business_hours_end_times
          }}
        </view>
        <view class="row">月售：{{ storeData.sale_count }}</view>
        <view class="row"
          >店铺状态：{{
            storeData.business_status == 1 ? "营业中" : "休息中"
          }}</view
        >
        <view class="tag-box">
          <view
            class="tag-column"
            v-for="(tag, index) in storeData.json"
            :key="index"
            >{{ tag.intro }}</view
          >
        </view>
        <!-- 添加修改店铺按钮 -->
        <button
          v-if="!showFoot"
          class="edit-btn"
          type="primary"
          size="mini"
          @click="editStore(storeData)"
        >
          修改店铺
        </button>
      </view>
    </view>
    <!-- 主体 -->
    <view class="main" :style="{ height: mainHeight }">
      <!-- <view class="" :style="{display:showZz}" style="position: absolute;top: 0;bottom: 0;left: 0;width: 100%; background: #3F536E;z-index: 999;opacity: 0.5;">
				遮罩
			</view> -->
      <view
        class="tabs-box"
        :style="{
          'background-color': 'rgba(245,245,245,' + navSearchBgOpacity + ')',
        }"
      >
        <view style="height: 100%">
          <view class="hx-tabs">
            <view
              class="hx-tabs-item"
              v-for="(item, i) in tabs"
              :key="i"
              :class="{ 'hx-tabs-active': swiperCurrent == i }"
              @click="swiperChange(i)"
              :style="{ transition: transtionTime + 'ms' }"
            >
              <text>{{ item.name }}</text>
            </view>
          </view>
        </view>
      </view>
      <swiper
        id="mainSwiper"
        style="height: 100%"
        :current="swiperCurrent"
        :duration="transtionTime"
        @transition="transition"
        @animationfinish="animationfinish"
      >
        <!-- 购物 -->
        <swiper-item class="swiper-item">
          <view class="scroll-items">
            <view class="category-list">
              <!-- 左侧分类导航 -->
              <scroll-view
                :scroll-top="menuScrollTop"
                :scroll-y="goodsBoxScroll"
                class="left"
              >
                <view
                  v-for="item in categoryList"
                  :key="item.id"
                  class="row"
                  :class="{ active: item.id == menuCurrentId }"
                  @click="showCategory(item)"
                >
                  <view class="text">
                    {{ item.name }}
                  </view>
                  <view class="row-number" v-if="item.number">
                    {{ item.number }}
                  </view>
                </view>
              </scroll-view>
              <!-- 右侧子导航 -->
              <scroll-view
                scroll-with-animation
                :scroll-y="goodsBoxScroll"
                class="right"
                @scroll="asideScroll"
                :scroll-top="tabScrollTop"
              >
                <view class="goodsListBox">
                  <view
                    class="category"
                    v-for="item in categoryList"
                    :key="item.id"
                    :id="'goodsBox' + item.id"
                  >
                    <view class="s-item">{{ item.name }}</view>
                    <view class="list">
                      <view
                        class="box"
                        v-for="(rowData, i) in goodsList"
                        :key="rowData.id"
                        v-if="item.id == rowData.category_id"
                      >
                        <!-- 商品列表 -->
                        <!-- <m-store-pro @touchOnGoods="touchOnGoods" :rowData="box"></m-store-pro>
													 -->
                        <!-- 商品列表 -->
                        <view class="m-store-item" @click="hrefGoodsInfo(i)">
                          <view class="m-img">
                            <image
                              style="width: 100%; height: 100%"
                              :src="adminImgPath + rowData.image"
                              mode="aspectFit"
                            ></image>
                          </view>
                          <view class="m-text">
                            <view class="m-title">
                              {{ rowData.name }}
                            </view>
                            <view class="m-descripe">
                              {{ rowData.introduction }}
                            </view>
                            <view class="m-bottom">
                              <block v-if="rowData.form">
                                <view class="m-price-box">
                                  <view class="symbol">￥</view>
                                  <view class="m-price"
                                    >{{ rowData.form_child[0].price }}
                                  </view>
                                  <view
                                    class="m-old-price"
                                    v-if="rowData.form_child[0].oldprice"
                                  >
                                    <text
                                      >￥{{
                                        rowData.form_child[0].oldprice
                                      }}</text
                                    >
                                  </view>
                                </view>
                              </block>
                              <block v-else>
                                <view class="m-price-box">
                                  <view class="symbol">￥</view>
                                  <view class="m-price">{{
                                    rowData.price
                                  }}</view>
                                  <view
                                    class="m-old-price"
                                    v-if="rowData.oldprice"
                                  >
                                    <text>￥{{ rowData.oldprice }}</text>
                                  </view>
                                </view>
                              </block>
                              <view class="m-distance" @click.stop>
                                <block v-if="rowData.form">
                                  <view
                                    class="miniBtn"
                                    @click="showForm(rowData)"
                                  >
                                    <text>选规格</text>
                                    <!-- #ifdef APP-PLUS || H5 -->
                                    <view
                                      class="num"
                                      v-if="getCartGoodsNum(rowData)"
                                    >
                                      {{ getCartGoodsNum(rowData) }}</view
                                    >
                                    <!-- #endif -->
                                  </view>
                                </block>
                                <block v-else>
                                  <view
                                    :class="'addEle_' + i"
                                    class="jumpPosition"
                                  >
                                  </view>
                                  <view class="numbox">
                                    <view
                                      class="numbox-minus"
                                      @click="
                                        calcValue(
                                          'minus',
                                          rowData,
                                          '.addEle_' + i
                                        )
                                      "
                                      v-if="rowData.number > 0"
                                    >
                                      <image
                                        src="/static/supermarket/icon_sub.png"
                                        mode="aspectFit"
                                      ></image>
                                    </view>
                                    <view
                                      class="numbox-value"
                                      v-if="rowData.number > 0"
                                      >{{ rowData.number }}</view
                                    >
                                    <view
                                      v-if="showFoot"
                                      class="numbox-plus"
                                      @click="
                                        calcValue(
                                          'plus',
                                          rowData,
                                          '.addEle_' + i
                                        )
                                      "
                                    >
                                      <image
                                        src="/static/supermarket/icon_add.png"
                                        mode="aspectFit"
                                      ></image>
                                    </view>
                                  </view>
                                </block>
                                <!-- <image @click="touchOnAddGoods('.addEle_' + i,rowData)" style="width:20px;height: 20px;" src="../../static/img/icon/shop_icon_buy.png" mode="aspectFit"></image>
																 -->
                              </view>
                            </view>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </scroll-view>
            </view>
          </view>
        </swiper-item>
        <!-- 商家 -->
        <swiper-item class="swiper-item">
          <scroll-view
            :scroll-top="menuScrollTop"
            :scroll-y="goodsBoxScroll"
            class="scroll-items business-box"
            style="height: 100%"
          >
            <view style="width: 100%; height: 27rpx"></view>
            <view class="info-list">
              <view
                class="info-list-container"
                style="display: flex; align-items: center"
              >
                <image
                  style="height: 43rpx"
                  src="/static/supermarket/icon_lt.png"
                  mode="heightFix"
                ></image>
                <text style="margin-left: 14rpx; flex: 1">{{
                  storeData.address
                }}</text>
              </view>
            </view>
            <view class="info-list hx-mt-15">
              <view
                class="info-list-container"
                style="display: flex; align-items: center"
              >
                <image
                  style="height: 43rpx"
                  src="/static/supermarket/icon_phone.png"
                  mode="heightFix"
                ></image>
                <text style="margin-left: 14rpx; flex: 1">{{
                  storeData.phone
                }}</text>
                <view
                  class="right"
                  style="display: flex; align-items: center"
                  @click="toTel()"
                >
                  <text>拨打</text>
                  <image
                    style="height: 43rpx; margin-left: 14rpx"
                    src="/static/supermarket/icon_tel.png"
                    mode="heightFix"
                  ></image>
                </view>
              </view>
            </view>
            <view class="info-list hx-mt-15">
              <text>
                {{ storeData.introduction }}
              </text>
            </view>
            <view
              class="info-list"
              style="margin-bottom: 27rpx; padding-top: 0"
            >
              <view
                class="info-list-container"
                style="display: flex; align-items: center"
              >
                <mp-html :content="storeData.content" />
              </view>
            </view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
    <!-- 购物车 -->
    <view
      class="foot"
      @touchmove.stop.prevent="mpClear"
      :style="{ height: footHeight }"
      v-if="showFoot"
    >
      <view class="zz" @click="hideShoppingCar"></view>
      <view class="btn-box">
        <view class="btn-box-left" @click="showShoppingCar">
          <view class="cart" :animation="cartAnimationData">
            <view class="tag cartNum" v-if="goodsTotalNumber > 0">{{
              goodsTotalNumber
            }}</view>
            <image
              id="cart"
              src="/static/supermarket/icon_shop.png"
              mode="aspectFit"
            >
            </image>
          </view>
          <view class="priceBox">
            <view class="hx-txt-18 hx-color-white">
              ￥{{ goodsTotalPrice || "0.00" }}
            </view>
          </view>
        </view>
        <view class="btn-box-right">
          <!-- <view class="jiesuan" v-if="goodsTotalPrice>0 && goodsTotalPrice >= 15" @click="jiesuan"> -->
          <view class="jiesuan" @click="jiesuan" v-if="goodsTotalPrice > 0">
            去结算
          </view>
          <!-- <view class="pscj hx-txt-10 hx-color-gray" v-else>
						<text v-if="15>0">差￥{{-(goodsTotalPrice-15)}}起送</text>
					</view> -->
        </view>
      </view>
      <view class="cart-box" :style="{ display: showCar ? 'flex' : 'none' }">
        <view class="box-container operating-box">
          <view class="operating-box_right"> </view>
          <view class="operating-box_left clear" @click="clearShoppingCart">
            <i class="hxicon-delete"></i>
            <text>清空购物车</text>
          </view>
        </view>
        <view class="goods-box">
          <view class="" style="flex: 1">
            <scroll-view
              scroll-y="true"
              class="goods-list-scroll"
              :scroll-top="carGoodsScrollTop"
            >
              <view class="goods-list">
                <view
                  class="box"
                  v-for="(rowData, i) in shoppCart"
                  :key="rowData.id"
                  v-if="rowData.number > 0"
                >
                  <view class="m-store-item">
                    <view class="m-img">
                      <image
                        style="width: 100%; height: 100%"
                        :src="adminImgPath + rowData.image"
                        mode="aspectFit"
                      ></image>
                    </view>
                    <view class="m-text">
                      <view class="m-title">
                        {{ rowData.name }}
                      </view>
                      <view class="m-descripe">
                        {{
                          rowData.current_form
                            ? rowData.form.name +
                              "：" +
                              rowData.current_form.name
                            : rowData.introduction
                        }}
                      </view>
                      <view class="m-bottom">
                        <view class="m-price-box">
                          <view class="symbol">￥</view>
                          <view class="m-price">{{ rowData.price }}</view>
                          <view class="m-old-price" v-if="rowData.oldprice">
                            <text>￥{{ rowData.oldprice }}</text>
                          </view>
                        </view>
                        <view class="m-distance">
                          <view
                            :class="'addEle2_' + rowData.id"
                            class="jumpPosition"
                          >
                          </view>
                          <view class="numbox">
                            <view
                              class="numbox-minus"
                              @click="
                                calcValue(
                                  'minus',
                                  rowData,
                                  '.addEle2_' + rowData.id
                                )
                              "
                              v-if="rowData.number > 0"
                            >
                              <image
                                src="/static/supermarket/icon_sub.png"
                                mode="aspectFit"
                              ></image>
                            </view>
                            <view
                              class="numbox-value"
                              v-if="rowData.number > 0"
                              >{{ rowData.number }}</view
                            >
                            <view
                              v-if="showFoot"
                              class="numbox-plus"
                              @click="
                                calcValue(
                                  'plus',
                                  rowData,
                                  '.addEle2_' + rowData.id
                                )
                              "
                            >
                              <image
                                src="/static/supermarket/icon_add.png"
                                mode="aspectFit"
                              ></image>
                            </view>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </scroll-view>
          </view>
        </view>
      </view>
    </view>
    <uni-popup ref="goodsDet" type="center">
      <view class="goods-details">
        <scroll-view
          style="max-height: 620rpx"
          scroll-y="true"
          scroll-left="20"
        >
          <image
            class="popup-img"
            v-if="goodsDetails.image"
            :src="adminImgPath + goodsDetails.image"
            mode="aspectFit"
          ></image>
          <view class="popup-top">
            <view class="popup-title">{{ goodsDetails.name }}</view>
            <view class="popup-sale">月售：{{ goodsDetails.sale_count }}</view>
            <mp-html class="popup-cont" :content="goodsDetails.content" />
          </view>
        </scroll-view>
        <view class="popup-bottom">
          <view class="popup-price"
            ><text>￥</text>{{ goodsDetails.price }}/{{
              goodsDetails.unit
            }}</view
          >
          <view class="addEle3 jumpPosition"> </view>
          <view class="numbox">
            <view
              class="numbox-minus"
              @click="
                calcValue('minus', goodsList[goodsDetails.index], '.addEle3')
              "
              v-if="goodsList[goodsDetails.index].number > 0"
            >
              <image
                src="/static/supermarket/icon_sub.png"
                mode="aspectFit"
              ></image>
            </view>
            <view
              class="numbox-value"
              v-if="goodsList[goodsDetails.index].number > 0"
              >{{ goodsList[goodsDetails.index].number }}</view
            >
            <view
              class="numbox-plus"
              v-if="showFoot"
              @click="
                calcValue('plus', goodsList[goodsDetails.index], '.addEle3')
              "
            >
              <image
                src="/static/supermarket/icon_add.png"
                mode="aspectFit"
              ></image>
            </view>
          </view>
        </view>
      </view>
    </uni-popup>
    <!-- v-if="showFormBox" -->
    <!-- 多规格 -->
    <!-- <uni-popup ref="popup" type="center" @change="popupChange">
			<view class="form-main" v-if="currentGoodsData.name">
				<view class="form-main_ctn" @click.stop.prevent="mpClear">
					<view class="godos_tit"><text>{{currentGoodsData.name}}</text></view>

					<view class="gg_tit">
						<text>{{currentGoodsData.form.name}}</text>
					</view>
					<view class="gg_box">
						<block v-for="form_child in currentGoodsData.form_child" :key="form_child.id"
							v-if="form_child.pid == currentGoodsData.form.id">
							<view class="item" :class="{'active': form_child.select}"
								@click="selectGoodsForm(currentGoodsData,form_child)">{{form_child.name}}</view>
						</block>
					</view>

					<view class="select_gg">
						<text class="lable">已选规格：</text>
						<view class="select_gg_box">
							<block v-for="form_child in currentGoodsData.form_child" :key="form_child.id"
								v-if="form_child.select == true">
								<view class="gg-item">
									<text>{{form_child.name}} </text>
									<text class="gg-item-cut">,</text>
								</view>
							</block>
						</view>
					</view>

					<view class="bottom">
						<view class="price_box">
							<text>￥</text>
							<block v-for="(form_child,i) in currentGoodsData.form_child" :key="i"
								v-if="form_child.select == true">
								<text class="price">{{form_child.price}}</text>
							</block>
						</view>
						<view class="form-btn-box">
							<block v-if="!currentGoodsData.number">
								<view id="ggAddBtn" class="add-btn" @click="formFirstAddGoods()">
									<i class="hxicon-add" id="eleAdd"></i>
									<text>加入购物车</text>
								</view>
							</block>
							<block v-else>
								<view class="addEle_gg jumpPosition"></view>
								<hx-number-box @change="formAddGoodsChange" :value="currentGoodsData.number"
									:rowData="currentGoodsData" :clickTime="animaTime + 200"
									@addChange="touchOnAddGoods('.addEle_gg',currentGoodsData)"></hx-number-box>
							</block>
						</view>

					</view>
				</view>
				<view class="close" @click="hiddenForm()">
					<i class="hxicon-close"></i>
				</view>
			</view>
		</uni-popup> -->
  </view>
</template>

<script>
import mpHtml from "@/pages/Component/Public/mp-html/components/mp-html/mp-html.vue";
import ikzLoading from "@/pages/Component/Public/Loading/loading.vue";
import ikz from "@/pages/Common/tools.js";
import uniIcons from "@/pages/Component/supermarket/component/uni-icons/uni-icons.vue";
import jumpBall from "@/pages/Component/supermarket/component/hx-jump-ball/hx-jump-ball.vue";
import hxNumberBox from "@/pages/Component/supermarket/component/uni-number-box/uni-number-box.vue";
//  加入购物车动画组件
import flyInCart from "@/pages/Component/supermarket/component/flyInCart.vue";

var statusBarHeight = uni.getSystemInfoSync().statusBarHeight;

export default {
  components: {
    jumpBall,
    uniIcons,
    hxNumberBox,
    flyInCart,
    mpHtml,
    ikzLoading,
  },
  data() {
    return {
      id: 0,
      adminImgPath: getApp().globalData.adminImgPath,
      loading_css: {
        display: "flex",
      },
      pageScroll: {},
      //商家信息
      storeData: [],
      //商品列表
      goodsList: [],
      //商品分类信息列表
      categoryList: [],
      //评论列表
      commentList: [],
      // 商品详情
      goodsDetails: "",
      navSearchWidth: 3,
      navSearchBgOpacity: 0,
      navSearchColor: "#ffffff",
      navHeadHeight: 44,
      //默认禁止商品栏滚动
      goodsBoxScroll: true,
      statusBarHeight,
      //动画时间
      animaTime: 300,
      //商家盒子高度
      storeInfoBoxHeight: 100,
      //展开门店信息容器
      showStoreBox: false,

      num: 1,
      element: [],
      cartAnimation: {},
      cartAnimationData: {},

      //tabs
      tabs: [
        {
          name: "购物",
        },
        {
          name: "商家",
        },
      ],
      swiperCurrent: 0,
      dx: 0,
      swiperCurrentSliderLeft: 0,
      transtionTime: 100,

      //所有购物车
      //显示购物车
      showFoot: false,

      //配送费
      shippingDees: 0,
      //配送起步价
      startingPrice: 0,

      //购物车商品价格合计
      goodsTotalPrice: 0,
      //购物车商品数量合计
      goodsTotalNumber: 0,
      //当前门店购物车
      shoppCart: [],
      //foot 高度
      footHeight: "0",
      //显示购物车
      showCar: false,
      //购物车中商品滚动条位置
      carGoodsScrollTop: 0,
      //购物车缓存 Storage 名称
      shoppingCartStorageName: "shopping_cart",

      sizeCalcState: false,
      tabScrollTop: 0,

      mainHeight: 0,
      menuCurrentId: 0,

      //购物车显示折扣
      showDiscount: true,
      //手指触摸滑动
      touchData: {},
      //页面滚动条距离顶部的距离
      pageScrollTop: 0,

      menuScrollTop: 0,

      //多规格当前产品
      currentGoodsData: {},
      //显示规格容器
      showFormBox: false,
      //显示规格动画
      formAnimationData: {},

      //购物车位置数据
      cartBasketRect: {},

      navStatus: true,
      isBack: true,
      number: 0,
    };
  },
  async onLoad(option) {
    if (!option) {
      return;
    }
    const that = this;
    this.id = option.id;
    this.showFoot = !option.person;
  },
  onShareAppMessage() {
    return {
      title: app.globalData.share_info.share_title,
      path: "/pages/Component/supermarket/Program/store/index?id=" + this.id,
      imageUrl: app.globalData.share_info.share_img,
    };
  },
  onReady() {
    const that = this;
    let sysInfo = uni.getSystemInfoSync();
    //屏幕高度 - 头部导航高度 - 状态栏高度 - 分页高度
    this.mainHeight = sysInfo.screenHeight - 43 - statusBarHeight - 40 + "px";
  },
  onBackPress(event) {
    if (this.showFormBox) {
      this.hiddenForm();
      return true;
    }
    if (!this.isBack) {
      this.$refs.popup.close();
      return true;
    }
  },
  onShow() {
    this.getStoreDet();
    this.getGoodsList();
  },
  mounted() {
    let that = this;
  },
  watch: {
    showStoreBox(val, oldVal) {
      if (val == true) {
        this.showStoreBoxFunc();
      } else {
        this.hiddenStoreBoxFunc();
      }
    },
  },
  onPageScroll(e) {
    let that = this;
    let top = e.scrollTop;
    that.pageScrollTop = e.scrollTop;
    that.pageScroll = e;

    if (top < 120) {
      if (that.navSearchWidth >= 3) {
        if (top < 3) {
          that.navSearchWidth = 3;
          that.navSearchBgOpacity = 0;
          that.navSearchColor = "#ffffff";
        } else {
          let n = top * (120 / 100);
          if (n > 100) {
            n = 100;
          }
          that.navSearchWidth = n;
          //that.navSearchBgOpacity =1
          that.navSearchBgOpacity = top * (1 / 100);
          that.navSearchColor = "#888888";
        }
      }
    } else {
      that.navSearchWidth = 100;
      that.navSearchBgOpacity = 1;
      that.navSearchColor = "#888888";
    }

    let view = uni.createSelectorQuery().select(".main");
    view
      .fields(
        {
          rect: true,
        },
        (data) => {
          if (data != null) {
            if (data.top <= statusBarHeight + 44) {
              that.goodsBoxScroll = true;
            } else {
              that.goodsBoxScroll = true;
            }
          }
        }
      )
      .exec();
  },
  methods: {
    // 获取商家详情
    getStoreDet() {
      var path = "/xyb/supermarket/index/business_detail";
      var data = {
        id: this.id,
      };
      ikz.requestPost(path, data, (res) => {
        console.log("获取商家详情", res);
        if (res.data.code) {
          //商家信息
          this.storeData = res.data.data;
          this.storeData.store_id = this.id;
          if (res.data.data.environment_images) {
            this.storeData.imgList =
              res.data.data.environment_images.split(",");
          }
          this.categoryList = res.data.data.goods_category;
          if (this.categoryList.length) {
            this.menuCurrentId = this.categoryList[0].id;
          }
        } else {
          uni.showModal({
            title: "提示",
            content: res.data.msg,
            showCancel: false,
            success: function (res) {},
          });
        }
      });
    },
    // 获取商品列表
    getGoodsList() {
      var path = "/xyb/supermarket/index/all_goods";
      var data = {
        business_id: this.id,
      };
      ikz.request(path, data, (res) => {
        console.log("获取商品列表", res);
        this.showLoading = false;
        uni.hideLoading();
        if (res.data.code) {
          this.goodsList = res.data.data.data;
          console.log(this.goodsList, "this.goodsList");
          for (let i in this.goodsList) {
            this.goodsList[i].number = 0;
          }
          let q = uni.createSelectorQuery();
          setTimeout(() => {
            this.calcSize();
            q.select("#cart")
              .boundingClientRect((data) => {
                this.cartBasketRect = data;
              })
              .exec();
            this.init();
          }, 100);
        } else {
          uni.showModal({
            title: "提示",
            content: res.data.msg,
            showCancel: false,
            success: function (res) {},
          });
        }
        this.loading_css.display = "none";
      });
    },
    // 拨打电话
    toTel() {
      uni.makePhoneCall({
        phoneNumber: this.storeData.phone,
      });
    },
    init() {
      // let that = this;
      // let goods = that.goodsList;
      // //商品初始化
      // // for(let i in goods){
      // // 	goods[i].purchases = 3
      // // }
      // that.shoppCart = [];
      // let carts = uni.getStorageSync(that.shoppingCartStorageName) || [];
      // //根据缓存数据 获取购物车中属于本商店的商品
      // for (let i in carts) {
      //   if (carts[i].store_id == that.storeData.store_id) {
      //     that.shoppCart = carts[i].shopping_cart ? carts[i].shopping_cart : [];
      //     break;
      //   }
      // }
      // that.goodsTotalPrice = 0;
      // that.goodsTotalNumber = 0;
      // for (let i in that.shoppCart) {
      //   for (let j in goods) {
      //     if (goods[j].id == that.shoppCart[i].id) {
      //       goods[j].number = that.shoppCart[i].number;
      //     }
      //   }
      //   //计算商品总价
      //   that.goodsTotalPrice += that.shoppCart[i].total;
      //   //商品总数量
      //   that.goodsTotalNumber += that.shoppCart[i].number;
      // }
      // that.goodsTotalPrice = Number(that.goodsTotalPrice).toFixed(2);
      // //初始化商品列表
      // that.goodsList = goods;

      // //初始化起步价和配送费
      // that.starting_price = that.storeData.starting_price;
      // that.shipping_dees = that.storeData.shipping_dees;

      that.setLabelNumber();
    },
    editStore(item) {
      const orderData = encodeURIComponent(JSON.stringify(item));
      // 这里添加跳转到修改店铺页面的逻辑
      uni.navigateTo({
        url: `/pages/Component/supermarket/Program/store/edit?orderData=${orderData}`,
      });
    },
    navBack() {
      if (getCurrentPages().length > 1) {
        uni.navigateBack();
      } else {
        // #ifdef H5
        history.back();
        // #endif
        // #ifndef H5
        uni.navigateTo({
          url: "/pages/index/index",
        });
        // #endif
      }
    },
    popupChange(e) {
      this.isBack = !e.show;
    },
    //显示 规格
    showForm(goods) {
      var that = this;
      let goodsCart = that.getStoreCart();

      if (goodsCart) {
        let currentGoods = null;
        for (let i in goodsCart) {
          if (goodsCart[i].id == goods.id) {
            currentGoods = goodsCart[i];
            break;
          }
        }
        if (currentGoods) {
          let selectStatus = false;
          for (let i in goods.form_child) {
            if (goods.form_child[i].id == currentGoods.current_form.id) {
              if (!selectStatus) {
                goods.form_child[i].select = true;
                goods.number = currentGoods.number;
                selectStatus = true;
              } else {
                goods.form_child[i].select = false;
              }
            } else {
              goods.form_child[i].select = false;
            }
          }
        }
      }
      that.currentGoodsData = goods;
      that.$refs.popup.open();
    },
    //隐藏规格
    hiddenForm() {
      this.$refs.popup.close();
    },
    formFirstAddGoods() {
      let that = this;
      that.formAddGoodsChange(1, that.currentGoodsData);
      that.touchOnAddGoods("#ggAddBtn", that.currentGoodsData);
    },
    //加入购物车
    formAddGoodsChange(number, goodsData) {
      let that = this;
      if (number >= 1) {
        for (let i in goodsData.form_child) {
          if (goodsData.form_child[i].select == true) {
            that.currentGoodsData.current_form = goodsData.form_child[i];
            break;
          }
        }
      }
      that.addGoodsChange(number, that.currentGoodsData);
    },
    //选择规格
    selectGoodsForm(goods, formChild) {
      let that = this;
      let data = goods.form_child;
      let n = 0;
      for (var i in data) {
        if (data[i].id == formChild.id) {
          data[i].select = true;
        } else {
          data[i].select = false;
        }
      }
      let goodsCart = that.getStoreCart();
      if (goodsCart) {
        for (let i in goodsCart) {
          if (
            goodsCart[i].id == goods.id &&
            goodsCart[i].current_form.id == formChild.id
          ) {
            n = goodsCart[i].number;
            break;
          }
        }
      }

      goods.number = n;
      this.currentGoodsData = goods;
    },
    //获取该商品在购物车的数量
    getCartGoodsNum(goods) {
      let cart = this.getStoreCart();
      let n = 0;
      if (cart) {
        for (let i in cart) {
          if (cart[i].id == goods.id) {
            n += cart[i].number;
          }
        }
      }
      return n;
    },
    //获取门店购物车
    getStoreCart() {
      const that = this;
      return that.shoppCart;
    },
    swiperChange(index) {
      this.swiperCurrent = index;
      this.swiperCurrentSliderLeft = 70 * index;
    },
    transition({ detail: { dx } }) {
      // this.$refs.tabs.setDx(dx);
    },
    animationfinish({ detail: { current } }) {
      /* this.$refs.tabs.setFinishCurrent(current); */
      this.swiperCurrent = current;
      this.current = current;
      this.swiperChange(current);
      // this.showFoot = current == 0 && this.showStoreBox != true ? true : false;
    },
    //一级分类点击
    showCategory(item) {
      const that = this;
      that.isBoxScroll = true;
      that.menuCurrentId = item.id;
      setTimeout(() => {
        let index = that.categoryList.findIndex(
          (sitem) => sitem.id === item.id
        );
        that.tabScrollTop = that.categoryList[index].top;
        that.isBoxScroll = false;
      }, 100);
    },
    //右侧栏滚动
    asideScroll(e) {
      const that = this;
      const scrollTop = Math.round(e.detail.scrollTop);
      that.calcSize();
      const tabs = that.categoryList
        .filter((item) => item.top <= scrollTop)
        .reverse();

      if (tabs.length > 0) {
        that.menuCurrentId = tabs[0].id;
      }
      const menuNum = that.categoryList.length;
      const cNum = tabs.length;
      // 定位在第4个分类，当分类滑动到第4格时将不再变换位置。
      const n = 4;
      if (cNum > n) {
        that.menuScrollTop = (cNum - n) * 45;
      } else {
        that.menuScrollTop = 0;
      }
    },
    //计算右侧栏每个tab的高度等信息
    calcSize(event) {
      let h = 0;
      // if(this.sizeCalcState){
      // 	return false
      // }
      this.categoryList.forEach((item) => {
        let view = uni.createSelectorQuery().select("#goodsBox" + item.id);
        view
          .fields(
            {
              size: true,
            },
            (data) => {
              if (data != null) {
                item.top = h;
                h += Math.round(data.height);
                item.bottom = h;
              }
            }
          )
          .exec();
      });
      this.sizeCalcState = true;
    },
    //小球跳跃动画
    touchOnAddGoods(ele, data) {
      const that = this;
      let q = uni.createSelectorQuery();
      q.select(ele)
        .boundingClientRect((res) => {
          that.$refs.inCart.addToCart(res, data.id);
        })
        .exec();
    },
    // 增减按钮
    calcValue(type, datas, ele) {
      if (type == "minus") {
        this.addGoodsChange(--datas.number, datas);
      } else {
        this.addGoodsChange(++datas.number, datas);
        this.touchOnAddGoods(ele, datas);
      }
    },
    //新增商品计算价格
    addGoodsChange(number, rowData) {
      number = Number(number);
      var that = this;
      let shoppCart = [];
      let totalPrice = 0;
      let totalNumber = 0;
      let existedGoods = false;
      //门店第一次添加商品
      let isFirstAddGoods = true;
      //是否为有规格的商品
      let isFormGoods = false;
      if (rowData.current_form) {
        isFormGoods = true;
      }
      let deleteGoods = null;
      let carts = uni.getStorageSync(that.shoppingCartStorageName) || [];
      if (carts.length != 0) {
        //根据缓存数据 获取购物车中属于本商店的商品
        for (let i in carts) {
          if (carts[i].store_id == that.storeData.store_id) {
            shoppCart = carts[i].shopping_cart ? carts[i].shopping_cart : [];
            isFirstAddGoods = false;
            break;
          }
        }
        //检查该商品是否为第一次添加，
        for (var i in shoppCart) {
          // if(shoppCart[i].id == rowData.id){
          // 	// 是多规格商品
          // 	if(isFormGoods){
          // 		//规格相同
          // 		if(shoppCart[i].current_form.id == rowData.current_form.id){
          // 			//数量为0，在购物车中移除该商品
          // 			if(number <= 0){
          // 				deleteGoods = shoppCart[i];
          // 				break;
          // 			}else{
          // 				// 直接修改商品数量，并计算出单品合计
          // 				shoppCart[i].price = rowData.current_form.price
          // 				shoppCart[i].oldprice = rowData.current_form.oldprice
          // 				shoppCart[i].total = number *  rowData.current_form.price
          // 			}

          // 		}
          // 	}else{
          // 		// 不是多规格商品
          // 	}
          // }

          if (shoppCart[i].id == rowData.id) {
            if (isFormGoods) {
              //相同商品比较规格是否也相同
              if (shoppCart[i].current_form.id == rowData.current_form.id) {
                existedGoods = true;
              }
            } else {
              existedGoods = true;
            }
            if (existedGoods) {
              //在购物车中移除该商品
              if (number <= 0) {
                deleteGoods = shoppCart[i];
                break;
              }
              //非第一次添加，直接修改商品数量，并计算出单品合计
              if (isFormGoods) {
                shoppCart[i].price = rowData.current_form.price;
                shoppCart[i].oldprice = rowData.current_form.oldprice;
                shoppCart[i].total = number * rowData.current_form.price;
              } else {
                shoppCart[i].price = rowData.price;
                shoppCart[i].total = number * rowData.price;
                shoppCart[i].oldprice = rowData.oldprice;
              }
              shoppCart[i].number = rowData.number = number;
              break;
            }
          }
        }
      }
      //在购物车中移除该商品
      if (deleteGoods != null) {
        if (carts) {
          //根据缓存数据 获取购物车中属于本商店的商品
          for (let i in carts) {
            if (carts[i].store_id == that.storeData.store_id) {
              var index = shoppCart.indexOf(deleteGoods);

              if (index > -1) {
                shoppCart.splice(index, 1);
              }
              carts[i].shopping_cart = shoppCart;
              uni.setStorageSync(that.shoppingCartStorageName, carts);
              break;
            }
          }
          setTimeout(() => {
            this.init();
          }, 100);
        } else {
          that.storeData.shopping_cart = [];
          uni.setStorageSync(that.shoppingCartStorageName, that.storeData);
        }
      }

      //第一次添加
      if (!existedGoods) {
        if (rowData.form) {
          rowData.price = rowData.current_form.price;
          rowData.oldprice = rowData.current_form.oldprice;
          rowData.total = number * rowData.current_form.price;
        } else {
          rowData.total = number * rowData.price;
        }
        rowData.number = number;
        shoppCart.push(rowData);
      }

      //计算总商品数量和总价
      for (var i in shoppCart) {
        //总价
        totalPrice += shoppCart[i].total;
        totalNumber += shoppCart[i].number;
      }
      //更改商品列表中的已购买数量
      for (let i in that.goodsList) {
        if (that.goodsList[i].id == rowData.id) {
          that.goodsList[i] = rowData;
          break;
        }
      }

      that.goodsTotalPrice = Number(totalPrice).toFixed(2);
      that.goodsTotalNumber = totalNumber;

      that.shoppCart = shoppCart;
      that.storeData.shopping_cart = shoppCart;

      that.setLabelNumber();
      if (isFirstAddGoods) {
        carts.push(that.storeData);
      }
      if (that.goodsTotalNumber == 0) {
        that.hideShoppingCar();
      }
      for (let i in carts) {
        if (!carts[i].shopping_cart.length) {
          carts.splice(i, 1);
        }
      }
      //购物车商品数据缓存至本地
      uni.setStorageSync(that.shoppingCartStorageName, carts);
    },
    //计算每类商品购买的总数
    setLabelNumber() {
      let that = this;
      //计算每一类购买商品的总数量
      for (let j in that.categoryList) {
        let n = 0;
        for (var i in that.shoppCart) {
          if (that.shoppCart[i].category_id == that.categoryList[j].id) {
            n += that.shoppCart[i].number;
          }
        }
        that.categoryList[j].number = n;
      }
    },
    //去结算
    jiesuan() {
      if (!uni.getStorageSync("user_info")) {
        uni.navigateTo({
          url: "/pages/login/index",
        });
        return;
      }
      // if(!getApp().globalData.mobile) {
      // 	uni.navigateTo({
      // 		url: "/pages/login/index"
      // 	})
      // 	return
      // }
      this.navTo(
        "/pages/Component/supermarket/Program/store/order?id=" + this.id
      );
    },
    navTo(url) {
      let that = this;
      if (that.navStatus) {
        that.navStatus = false;
        uni.navigateTo({
          url: url,
          complete: function () {
            that.navStatus = true;
          },
        });
      }
    },
    //联系商家
    contact() {
      uni.showModal({
        title: "",
        content: "联系商家",
      });
    },
    showStoreBoxFunc() {
      this.storeInfoBoxHeight = uni.getSystemInfoSync().screenHeight - 136;
      this.$set(this.$data, "showFoot", false);
      this.showStoreBox = true;
      uni.pageScrollTo({
        duration: 0,
        scrollTop: 0,
      });
    },
    hiddenStoreBoxFunc() {
      this.storeInfoBoxHeight = 100;
      this.showStoreBox = false;
      if (this.swiperCurrent == 0) {
        this.$set(this.$data, "showFoot", true);
      }
    },
    mpClear(e) {
      // TODO nvue 取消冒泡
      e.stopPropagation();
    },
    //显示购物车
    showShoppingCar() {
      if (this.goodsTotalNumber == 0) {
        return;
      }
      this.footHeight = "100%";
      this.showCar = true;
      this.carGoodsScrollTop = 0;
    },
    //隐藏购物车
    hideShoppingCar() {
      this.footHeight = "0";
      this.showCar = false;
    },
    //清空该门店的购物车
    clearShoppingCart() {
      let that = this;
      that.shoppCart = [];
      that.storeData.shopping_cart = [];
      let shoppingCartAll =
        uni.getStorageSync(that.shoppingCartStorageName) || [];
      for (let i in shoppingCartAll) {
        if (shoppingCartAll[i].store_id == that.storeData.store_id) {
          shoppingCartAll.splice(i, 1);
        }
      }
      uni.setStorageSync(that.shoppingCartStorageName, shoppingCartAll);

      for (let i in that.goodsList) {
        that.goodsList[i].number = 0;
      }
      for (let i in that.categoryList) {
        that.categoryList[i].number = 0;
      }
      //购物车商品价格合计
      that.goodsTotalPrice = 0;
      //购物车商品数量合计
      that.goodsTotalNumber = 0;
      that.hideShoppingCar();
    },
    hrefGoodsInfo(index) {
      this.goodsDetails = this.goodsList[index];
      this.goodsDetails.index = index;
      this.getGoodsDetails();
    },
    // 获取商品详情介绍
    getGoodsDetails() {
      var path = "/xyb/supermarket/index/editor";
      var data = {
        id: this.goodsDetails.id,
        type: 1,
      };
      ikz.requestPost(path, data, (res) => {
        console.log("获取商家详情介绍", res);
        if (res.data.code) {
          this.goodsDetails.content = res.data.data;
          this.$refs.goodsDet.open();
        } else {
          uni.showModal({
            title: "提示",
            content: res.data.msg,
            showCancel: false,
            success: function (res) {},
          });
        }
      });
    },
    touchStart(e) {
      this.touchData.clientX = e.changedTouches[0].clientX;

      this.touchData.clientY = e.changedTouches[0].clientY;
    },
  },
};
</script>

<style lang="scss">
//主题颜色
$hx-theme-color: #ffc107;
$hx-theme-color-light: #ffeb3b;

.edit-btn {
  margin-top: 20rpx;
  background-color: #007aff;
  color: #fff;
  border-radius: 10rpx;
  position: absolute;
  bottom: 0;
  right: 40rpx;
}
.reserve-tag {
  font-size: 24rpx;
  color: #ff5f15;
  padding: 4rpx 12rpx;
  background: #fff0e6;
  white-space: nowrap;
  border-radius: 6rpx;
}
.add {
  position: fixed;
  right: 60upx;
  top: 300upx;
  z-index: 999;
}

.ctn {
  /* border: 1px solid #e3e3e3; */
  width: 100%;
  display: flex;
  justify-content: flex-end;
  overflow: hidden;
  align-items: center;

  .searchCtn {
    display: flex;
    border-radius: 80upx;
    padding: 8upx 12upx;
    line-height: 44upx;
    background: #e0e0e0;
    overflow: hidden;
    align-items: center;
    min-width: 22px;
  }

  .leftBox {
    display: flex;
    width: 53px;
    justify-content: space-between;
    flex: none;
    margin: 0 8px;
  }

  .jrNull {
    /* #ifdef MP */
    width: 95px;
    flex: none;
    /* #endif */
  }
}

page {
  background: #ffffff;
}

.hx-bb {
  border-bottom: 1px solid $uni-border-color;
}

.hx-txt-10 {
  font-size: 18rpx;
}

.hx-txt-12 {
  font-size: 22rpx;
}

.hx-txt-14 {
  font-size: 25rpx;
}

.hx-txt-16 {
  font-size: 29rpx;
}

.hx-txt-18 {
  font-size: 33rpx;
}

.hx-txt-22 {
  font-size: 40rpx;
}

.hx-color-gray {
  color: #bbbbbb;
}

.hx-color-white {
  color: #ffffff;
}

.hx-color-black {
  color: #333333;
}

.hx-txt-weigth {
  font-weight: bold;
}

.hx-mb-10 {
  margin-bottom: 10px;
}

.hx-mt-15 {
  margin-top: 27rpx;
}

.hx-shadow {
  box-shadow: 0px 6upx 16upx rgba(173, 173, 173, 0.2);
}

.hx-number-box {
  position: relative;
  z-index: 10;
}

.miniBtn {
  position: relative;
  padding: 0 12px;
  border-radius: 20px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  background: linear-gradient(100deg, #ffeb3b, #ffc107);
  font-size: 18rpx;
  color: #333;

  .num {
    position: absolute;
    right: 0;
    top: -10px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    font-size: 18rpx;
    color: #fff;
    background-color: #ff5722;
    text-align: center;
    border-radius: 50%;
  }
}

.hx-store {
  .header {
    display: flex;
    margin-top: 22rpx;
    padding: 22rpx;
    background-color: #ffffff;

    .left {
      margin-right: 22rpx;

      image {
        width: 175rpx;
        height: 175rpx;
        border-radius: 10rpx;
      }
    }

    .right {
      flex: 1;
      display: flex;
      position: relative;
      flex-wrap: wrap;
      align-content: space-between;

      .tit {
        font-weight: 600;
        font-size: 33rpx;
        line-height: 38rpx;
        color: #333333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
      }

      .row {
        font-weight: 400;
        font-size: 26rpx;
        line-height: 28rpx;
        color: #979797;
        width: 100%;
      }

      .tag-box {
        display: flex;
        width: 100%;
        height: 28rpx;

        .tag-column {
          font-weight: 400;
          font-size: 20rpx;
          line-height: 24rpx;
          color: #fb7a26;
          padding: 2rpx 15rpx;
          background: #fff2d9;
          border-radius: 15rpx;
          margin-left: 15rpx;

          &:first-child {
            margin: 0;
          }
        }
      }
    }
  }

  .container {
    margin: 0 32upx;
  }

  .tabs-box {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: white;
    border-bottom: 1px solid #efefef;
    height: 40px;

    .hx-tabs {
      position: relative;
      display: flex;
      height: 100%;

      .hx-tabs-item {
        width: 50%;
      }

      &-item {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 70px;
        color: #666666;

        text {
          font-size: 29rpx;
        }
      }

      &-active {
        color: #fb7a26;
        background: #ffebdd;
      }

      &-slider-box {
        position: absolute;
        display: flex;
        justify-content: center;
        bottom: 0;
        width: 70px;
      }

      &-slider {
        display: flex;
        background: #f6d200;
        width: 30px;
        height: 3px;
      }
    }
  }

  .main {
    position: relative;
    background-color: #ffffff;

    #mainSwiper {
      background-color: #eeeeee;
      position: sticky;
      top: calc(40px + 44px + var(--status-bar-height));

      .scroll-items {
        // 商品列表样式
        .category-list {
          width: 100%;
          background-color: #fff;
          display: flex;
          padding-bottom: 50px;

          .left,
          .right {
            background: #fff;
            position: absolute;
            top: 0;
            bottom: 0upx;
          }

          .left {
            width: 24%;
            left: 0upx;
            background-color: #f6f3f3;

            .row {
              width: 100%;
              height: 45px;
              display: flex;
              align-items: center;
              overflow: hidden;
              position: relative;

              .text {
                width: 100%;
                font-size: 25rpx;
                color: #999999;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                text-align: center;
                padding: 0 29rpx;
              }

              &-number {
                position: absolute;
                width: 18px;
                height: 18px;
                right: 4px;
                top: 4px;
                background: #ff5722;
                border-radius: 50%;
                line-height: 18px;
                text-align: center;
                font-size: 18rpx;
                color: #ffffff;
              }

              &.active {
                height: 45px;
                background-color: #fff;

                .text {
                  font-size: 25rpx;
                }
              }
            }

            .row:last-child {
              margin-bottom: 200upx;
            }
          }

          .right {
            width: 76%;
            left: 24%;

            .goodsListBox {
              padding-bottom: 100px;

              .category {
                //width: 94%;
                padding: 0 15px 10px 15px;

                .s-item {
                  height: 45px;
                  line-height: 45px;
                  font-size: 29rpx;
                  background: #ffffff;
                  color: #555555;
                  position: sticky;
                  top: 0;
                  z-index: 18;
                }

                .list:last-child {
                  margin-bottom: 0;
                }

                .list {
                  margin-bottom: 20px;
                  width: 100%;
                  display: flex;
                  flex-wrap: wrap;

                  .box:first-child {
                    .m-store-item {
                      margin-top: 0;
                    }
                  }

                  .box {
                    width: 100%;

                    .m-store-item {
                      display: flex;
                      flex-direction: row;
                      width: 100%;
                      justify-content: space-between;
                      margin-top: 15px;
                      margin-bottom: 15px;

                      .m-img {
                        flex: 0 0 154rpx;
                        height: 154rpx;
                        border-radius: 7rpx;
                      }

                      .m-text {
                        flex: 1;
                        position: relative;
                        padding: 0 11rpx;
                        display: flex;
                        align-content: space-between;
                        flex-wrap: wrap;

                        .m-title {
                          font-size: 29rpx;
                          color: #555555;
                          font-weight: bold;
                          display: -webkit-box;
                          -webkit-box-orient: vertical;
                          overflow: hidden;
                          -webkit-line-clamp: 1;
                          width: 100%;
                        }

                        .m-descripe {
                          font-size: 22rpx;
                          color: #999999;
                          display: -webkit-box;
                          -webkit-box-orient: vertical;
                          overflow: hidden;
                          -webkit-line-clamp: 2;
                          width: 100%;
                        }

                        .m-bottom {
                          display: flex;
                          justify-content: space-between;
                          width: 100%;
                          align-items: center;
                        }

                        .m-price-box {
                          font-weight: bold;
                          display: flex;
                          align-items: flex-end;
                          width: 100%;

                          .symbol {
                            color: #ff582b;
                            font-size: 22rpx;
                          }

                          .m-price {
                            position: relative;
                            top: 2px;
                            font-size: 33rpx;
                            color: #ff582b;
                          }

                          .m-old-price {
                            margin-left: 3px;
                            display: flex;
                            flex-direction: row;
                            font-size: 18rpx;
                            color: #999999;
                            margin-top: 5upx;
                            text-decoration: line-through;
                            font-weight: normal;
                          }
                        }

                        .m-distance {
                          position: relative;
                          color: #b2b2b2;
                          font-size: 20upx;
                          text-align: right;

                          .jumpPosition {
                            position: absolute;
                            bottom: 23px;
                            right: 0;
                            z-index: 2;
                            width: 28px;
                            height: 28px;
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }

      .evaluate-box {
      }

      .business-box {
        .info-list {
          background: #ffffff;
          padding: 15px;

          &-container {
            line-height: 36rpx;
            display: flex;
            flex-direction: row;

            [class*="hxicon-"] {
              color: #a2a2a2;
              margin-right: 8px;
            }

            text {
              font-size: 25rpx;
            }

            .right {
              float: right;
              color: #fb7a26;
              display: flex;
              flex-direction: row;
              align-items: center;

              [class*="hxicon-"] {
                color: #fb7a26;
                margin-right: 0;
                font-size: 29rpx;
              }
            }
          }

          .scroll-img {
            white-space: nowrap;
            overflow-x: auto;
            width: 100%;

            .column {
              width: 290rpx;
              height: 182rpx;
              border-radius: 9rpx;
              margin-left: 29rpx;

              &:first-child {
                margin-left: 0;
              }
            }
          }
        }
      }
    }
  }

  .foot {
    position: fixed;
    display: flex;
    z-index: 999;

    justify-content: center;
    align-items: center;
    bottom: 0;
    height: 100%;
    width: 100%;

    /*width: calc(100% - 32px);*/
    .btn-box {
      position: absolute;
      display: flex;
      bottom: 15px;
      justify-content: center;
      align-items: center;
      margin: 0;
      height: 50px;
      background: #222222;
      border-radius: 100upx;
      width: calc(100% - 32px);
      z-index: 9;

      &-left {
        height: 100%;
        flex: auto;
        display: flex;
        justify-content: flex-start;
        align-self: center;
        align-items: center;
        padding-left: 17rpx;

        .cart {
          position: relative;
          width: 36px;
          height: 36px;

          image {
            width: 100%;
            height: 100%;
          }

          .tag {
            position: absolute;
            right: -11rpx;
            top: -7rpx;
            height: 18px;
            width: 18px;
            background-color: #ff4000;
            color: #ffffff;
            border-radius: 50%;
            z-index: 1;
            font-size: 18rpx;
            text-align: center;
            line-height: 18px;
          }
        }

        .priceBox {
          flex: auto;
          margin-left: 22rpx;
        }
      }

      &-right {
        width: 154rpx;
        height: 100%;
        position: relative;
        display: flex;
        justify-content: flex-start;
        align-self: center;
        align-items: center;

        .pscj {
          width: 100%;
          height: 100%;
          border-top-right-radius: 100upx;
          border-bottom-right-radius: 100upx;
          background: #222222;
          text-align: center;
          display: flex;
          justify-content: center;
          align-self: center;
          align-items: center;
        }

        .jiesuan {
          width: 100%;
          height: 100%;
          font-size: 28upx;
          border-top-right-radius: 100upx;
          border-bottom-right-radius: 100upx;
          text-align: center;
          display: flex;
          justify-content: center;
          align-self: center;
          align-items: center;
          background: linear-gradient(90deg, #ffa726, #ff7043);
          font-weight: bold;
          color: #fff;
        }
      }
    }

    .zz {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.7);
      z-index: 1;
    }

    .cart-box {
      display: flex;
      justify-content: flex-start;
      flex-flow: column;
      background: #ffffff;
      position: absolute;
      bottom: 0;
      z-index: 2;
      max-height: 66%;

      padding-bottom: 62px;
      border-top-left-radius: 16px;
      border-top-right-radius: 16px;
      overflow: hidden;
      width: 100%;

      .rebate-box {
        height: 30px;
        background: #ffc107;
        color: #ff9900;
        text-align: center;
        line-height: 30px;
        font-size: 25rpx;
      }

      .box-container {
        box-sizing: border-box;
        padding: 0 16px;
      }

      .operating-box {
        font-size: 22rpx;
        line-height: 40px;
        height: 40px;
        border-bottom: 1px solid #f6f6f6;
        color: #666666;
        display: flex;
        flex-direction: row;

        &_right {
          flex: 1;
        }

        &_left {
          display: flex;
          flex-direction: row;
        }
      }

      .goods-box {
        height: 100%;
        overflow: hidden;
        flex: 1;
        display: flex;

        .goods-list-scroll {
          height: 100%;

          .goods-list {
            width: 100%;
            display: flex;
            flex-wrap: wrap;

            .box {
              width: 100%;
              border-bottom: 1px solid #f6f6f6;
              box-sizing: border-box;
              padding: 0 16px;

              .m-store-item {
                display: flex;
                flex-direction: row;
                width: 100%;
                justify-content: space-between;
                padding-top: 15px;
                padding-bottom: 15px;

                .m-img {
                  flex: 0 0 154rpx;
                  height: 154rpx;
                  border-radius: 7rpx;
                }

                .m-text {
                  flex: 1;
                  position: relative;
                  padding: 0 6px;
                  display: flex;
                  align-content: space-between;
                  flex-wrap: wrap;

                  .m-title {
                    width: 100%;
                    font-size: 29rpx;
                    color: #555555;
                    font-weight: bold;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    -webkit-line-clamp: 1;
                  }

                  .m-descripe {
                    width: 100%;
                    font-size: 22rpx;
                    color: #999999;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    -webkit-line-clamp: 2;
                  }

                  .m-bottom {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                  }

                  .m-price-box {
                    height: 24px;
                    font-weight: bold;
                    display: flex;
                    flex-direction: row;
                    align-items: flex-end;

                    .symbol {
                      color: #ff582b;
                      font-size: 22rpx;
                    }

                    .m-price {
                      position: relative;
                      top: 2px;
                      font-size: 33rpx;
                      color: #ff582b;
                    }

                    .m-old-price {
                      margin-left: 3px;
                      display: flex;
                      flex-direction: row;
                      font-size: 18rpx;
                      color: #999999;
                      margin-top: 5upx;
                      text-decoration: line-through;
                      font-weight: normal;
                    }
                  }

                  .m-distance {
                    position: relative;
                    color: #b2b2b2;
                    font-size: 20upx;
                    text-align: right;

                    .jumpPosition {
                      position: absolute;
                      bottom: 23px;
                      right: 0;
                      z-index: 2;
                      width: 28px;
                      height: 28px;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

uni-popup {
  position: relative;
  z-index: 9999;
}

mp-html {
  width: 100%;
}

.goods-details {
  width: 600rpx;
  margin: 0 auto;
  background: #fff;
  border-radius: 36rpx;
  overflow: hidden;
  padding: 29rpx;

  .popup-img {
    width: 100%;
    height: 435rpx;
  }

  .popup-top {
    padding-top: 29rpx;

    .popup-title {
      font-weight: 600;
      font-size: 33rpx;
      line-height: 45rpx;
    }

    .popup-sale {
      font-weight: 400;
      font-size: 22rpx;
      line-height: 29rpx;
      color: #979797;
      margin: 15rpx 0;
    }

    .popup-cont {
      font-weight: 400;
      font-size: 25rpx;
      line-height: 36rpx;
      color: #979797;
    }
  }

  .popup-bottom {
    padding-top: 29rpx;
    margin-top: 12rpx;
    border-top: 1rpx solid rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;

    .popup-price {
      font-weight: 600;
      line-height: 29rpx;
      color: #ff0000;
      font-size: 33rpx;

      text {
        font-size: 22rpx;
      }
    }

    .jumpPosition {
      position: absolute;
      top: -15rpx;
      right: 0;
      z-index: 2;
      width: 28px;
      height: 28px;
    }
  }
}

.numbox {
  display: flex;
  justify-content: flex-end;
  min-width: 155rpx;
  position: relative;
  z-index: 10;

  .numbox-plus {
    width: 45rpx;
    height: 45rpx;
  }

  .numbox-value {
    width: 50rpx;
    height: 45rpx;
    text-align: center;
    font-size: 26rpx;
    color: #222222;
    line-height: 45rpx;
  }

  .numbox-minus {
    width: 45rpx;
    height: 45rpx;
  }

  image {
    width: 100%;
    height: 100%;
  }
}

.form-main {
  display: flex;
  flex-direction: column;
  justify-content: left;
  padding: 15px;

  .form-main_ctn {
    display: flex;
    flex-direction: column;
    justify-content: left;
    padding: 23px 22px 22px 22px;
    background-color: #fff;
    border-radius: 8px;

    .godos_tit {
      margin-top: 4px;
      margin-bottom: 6px;
      font-size: 33rpx;
      font-weight: bold;
      color: #333;
    }

    .gg_tit {
      margin-top: 8px;
      font-size: 25rpx;
      font-weight: bold;
      color: #555;
    }

    .gg_box {
      margin-top: 8px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      font-size: 22rpx;
      color: #333;

      .item {
        margin-right: 25rpx;
        margin-bottom: 25rpx;
        border: 1px solid #f1f1f1;
        border-radius: 4px;
        padding: 4px 6px;
      }

      .item.active {
        border-color: #ffe081;
        background-color: #fff0b7;
      }
    }

    .select_gg {
      margin: 26px -12px 0;
      padding: 6px 12px;
      color: #999;
      background-color: #ffffff;
      display: flex;
      flex-direction: row;

      .lable {
      }

      .select_gg_box {
        flex: 1;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        .gg-item {
          color: #333;

          .gg-item-cut {
            margin-left: 3px;
            margin-right: 3px;
          }
        }

        .gg-item:last-child {
          .gg-item-cut {
            display: none;
          }
        }
      }
    }

    .bottom {
      position: relative;
      display: flex;
      flex-direction: row;
      margin-top: 12px;

      .price_box {
        flex: 1;
        lign-items: baseline;
        color: #ff582b;
        font-size: 25rpx;
        position: relative;
        top: 4px;

        .price {
          font-size: 43rpx;
        }
      }

      .jumpPosition {
        position: absolute;
        right: 16px;
        top: 2px;
      }

      .form-btn-box {
        height: 30px;
        line-height: 30px;

        .add-btn {
          border-radius: 50px;
          background-color: #ffce3c;
          padding: 0 12px;
          display: flex;
          height: 30px;
          line-height: 30px;
          align-items: center;

          i {
            font-weight: bold;
            font-size: 33rpx;
            margin-right: 3px;
            margin-left: -4px;
          }

          text {
            font-size: 25rpx;
            font-weight: bold;
            color: #363636;
          }
        }
      }
    }
  }

  .close {
    position: absolute;
    left: 50%;
    margin-left: -20px;
    bottom: -70px;
    border-radius: 50%;
    height: 40px;
    width: 40px;
    background-color: #fff;
    opacity: 0.7;
    text-align: center;
    line-height: 43px;

    i {
      font-weight: bold;
      font-size: 40rpx;
    }
  }
}
</style>
